<template>
  <view>
    <!-- <button @click="getAllPics">test</button> -->
    <view class="waterfall-container">
      <view
        class="waterfall-item"
        v-for="i in 30"
        :key="i"
        data-picdetail=""
        @click="onPictureDetail"
      >
        <image
          :src="img_path[Math.floor(Math.random() * img_path.length)]"
          mode="widthFix"
        ></image>
        <view class="img-discription">{{ img_discription }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 增加成员变量, 记录请求的时间
      // 在拉到底部时, 再次发出请求, 数据中包含上次请求的时间
      img_path: [
        "/static/temp_pics/pic1.jpeg",
        "/static/temp_pics/pic2.jpeg",
        "/static/temp_pics/pic3.png",
        "/static/temp_pics/pic4.png",
        "/static/temp_pics/pic5.jpg",
        "/static/temp_pics/pic6.png",
        "/static/temp_pics/pic7.png",
      ],
      img_discription: "测试图片",
    };
  },
  methods: {
    getAllPics: function () {
      // H5 没有 API
      uni.getSavedFileList({
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    onPictureDetail: function (e) {
      console.log("show detail", e.target);
      uni.navigateTo({
        url:
          "/pages/details/picDetail" +
          "?picid=" +
          encodeURIComponent(JSON.stringify(e.currentTarget.dataset.picdetail)),
        success: () => {
          console.log("successfully navigated!");
        },
        fail: (err) => {
          console.log("failed to navigate", err);
        },
      });
    },
  },
};
</script>

<style>
.waterfall-container {
  padding: 20upx;
  column-count: 2;
  column-gap: 20upx;
}
.waterfall-item {
  box-shadow: 0 0 10upx lightgray;
  /* border-radius: 10upx; */
  break-inside: avoid;
  margin: 0 0 20upx 0;
  cursor: pointer;
}
.img-discription {
  font-size: 25upx;
  padding: 0 10upx 10upx 10upx;
}
uni-image {
  display: inline-block;
  /* border-radius: 10upx; */
  /* box-shadow: 0 0 5upx grey; */
  width: 100%;
  /* vertical-align: middle; */
}
uni-image > img uni-image-div {
  object-fit: contain;
}
</style>